<template>
	<view class="page">
		<image class="header-bg" :src="common.apiHost+'weappImg/bg_01.png'" mode="widthFix"></image>
		
		<view class="form-wrap" v-if="pets.length > 0">
		<view class="form-group form-group__picker">
			<view class="form-group__title require">预约爱宠</view>
			<view class="form-group__con" >
				<picker class="form-group__from" mode="selector" :range="pets" range-key="nickName" @change="pickerChange">
					<view class="sub-div">
						<view v-if="!formDate.petId" class="picker-res placeholder-class">{{pickerRes}}</view>
						<view v-else class="picker-res">{{formDate.petName}}</view>
						<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="form-group form-group__checkbox">
			<view class="form-group__title require">服务类型</view>
			<view class="form-group__con ">
				<view :class="formDate.bookingType === item.id?'op op-active':'op'" v-for="(item, index) in serviceType" :key='item.id' @click="muSelect(item.id)">{{item.name}}</view>
			</view>
		</view>
		<view class="form-group form-group__picker">
			<view class="form-group__title">预约时间</view>
			<view class="form-group__con" @click="changeShow(true)">
				<view v-if="!formDate.bookingTime" class="placeholder-class">{{pickerRes}}</view>
				<view v-else>{{common.subTime(formDate.bookingTime)}}</view>
				<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
			</view>
			<u-picker mode="time" :params='params' v-model="showTime" @confirm='selectTime'></u-picker>
		</view>
		
		<editor id="editor" class="ql-container" :placeholder="placeholder" @input='inputMarks'></editor>
		</view>
		<view v-if="pets.length > 0" class="page-submit" @click="formSubmit">确认预约</view>
		<view class="footer-block"></view>
		
		
		<view v-if="pets.length <= 0" class="empty">
			<u-empty mode='list' text='您还没有添加宠物,请先添加宠物~'></u-empty>
		</view>
		
		<view v-if="pets.length <= 0" class="circular-submit" @click="$link('/pagesMine/petsAdd')">去添加</view>
	
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				common,
				pets: [],
				pickerRes: '点击选择',
				placeholder: '请输入相关备注信息(选填)',
				formDate: {
				  petId: "", 
				  petName: "", 
				  bookingType: "", // 预约类型
				  bookingTime: "", // 预约时间
				  remarks: "", // 备注
				},
				serviceType: [],
				showTime: false,
				params: { year: true, month: true, day: true, hour: true, minute: true }
			}
		},
		
		onShow() {
			this.getPetList()
			this.getServiceType()
		},
		
		methods: {
			getPetList() {
				api.getPetList({ },(res) => {
					 this.pets = res
				}) 
			},
			
			getServiceType() {
				api.getDictionaryListByCode({ onlyCode: common.dicCode.serviceType }, res => {
					this.serviceType = res || []
				})
			},
			
			pickerChange(e) {
				let index = e.detail.value
				this.formDate.petId = this.pets[index].id
				this.formDate.petName = this.pets[index].nickName
			},
			
			// 选择服务类型
			muSelect(typeId) {
				this.formDate.bookingType = typeId
			},
			
			changeShow(status) {
				this.showTime = status
			},
			
			 // 选择时间
			 selectTime(e) {
				console.log(e);
				this.formDate.bookingTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			 },
			 
			 inputMarks(e) {
				 console.log(e);
				 this.formDate.remarks = e.detail.text
			 },
			 
			 formSubmit() {
			 	let formData = this.formDate
			 	if(!formData.petId) { this.$showToast('请选择需要预约服务的宠物~'); return }
			 	if(!formData.bookingType) { this.$showToast('请选择服务类型~'); return }
			 	if(!formData.bookingTime) { this.$showToast('请选择预约时间~'); return }
			 	api.saveOnlineBooking(formData, res => {
					this.$link('/pagesMain/appointment/success?id='+res)
			 	})
			 }
		}
	}
</script>

<style scoped lang="scss">
	.header-bg{
		width: 100%;
	}
	.o .op{
		flex-wrap: wrap;
		height: auto;
		padding: 20upx 0;
		border-radius: 10upx;
		width: 215upx;
	}
	.o .op {
		margin-right: 0;
	}
	.limit{
		width: 100%;
		text-align: center;
		font-size: $font-size-24;
	}
</style>
